//运费模块
<template>
  <el-dialog
    v-model="flags"
    :title="titles == '新增' ? '新增' : '编辑'"
    width="70%"
    :before-close="handleClose"
  >
    <div class="first_ipt">
      <span>模板名称</span
      ><input type="text" v-model="transName" placeholder="模板名称" />
    </div>
    <div class="wids">
      <span class="span1">模板类型</span>
      <el-radio-group v-model="radio">
        <el-radio :label="1" @click="()=>{isbiaoge=true}">买家承担运费</el-radio>
        <el-radio :label="2" @click="()=>{isbiaoge=false}">卖家包邮</el-radio>
      </el-radio-group>
    </div>
    <div class="widss">
      <span class="span1">收费方式</span>
      <el-radio-group v-model="radio1">
        <el-radio :label="1" @click="check1(radio1)">按件数</el-radio>
        <el-radio :label="2" @click="check1(radio1)">按重量</el-radio>
        <el-radio :label="3" @click="check1(radio1)">按体积</el-radio>
      </el-radio-group>
    </div>
    <table class="biaoge">
      <tr>
        <td>可配送区域</td>
        <td>
          首件<span v-show="jianshu">(个)</span
          ><span v-show="zhongliang">(kg)</span
          ><span v-show="tijian">(m3)</span>
        </td>
        <td>
          运费<span v-show="jianshu">(元)</span
          ><span v-show="zhongliang">(元)</span
          ><span v-show="tijian">(元)</span>
        </td>
        <td>
          续件<span v-show="jianshu">(个)</span
          ><span v-show="zhongliang">(kg)</span
          ><span v-show="tijian">(m3)</span>
        </td>
        <td>
          续费<span v-show="jianshu">(元)</span
          ><span v-show="zhongliang">(元)</span
          ><span v-show="tijian">(元)</span>
        </td>
      </tr>
      <tr>
        <td>所有区域</td>
        <td>
          <el-input-number
            v-model="num1"
            :min="0"
            :max="10"
            controls-position="right"
            size="large"
            @change="handleChange"
          />
        </td>
        <td>
          <el-input-number
            v-model="num2"
            :min="0"
            :max="10"
            controls-position="right"
            size="large"
            @change="handleChange"
          />
        </td>
        <td>
          <el-input-number
            v-model="num3"
            :min="0"
            :max="10"
            controls-position="right"
            size="large"
            @change="handleChange"
          />
        </td>
        <td>
          <el-input-number
            v-model="num4"
            :min="0"
            :max="10"
            controls-position="right"
            size="large"
            @change="handleChange"
          />
        </td>
      </tr>
    </table>
    <el-button v-if="isbiaoge" type="primary" @click="appchied()" style="margin-top: 20px"
      ><el-icon><LocationFilled /></el-icon
      >点击添加可配送的区域和运费</el-button
    >
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="flags = false">取消</el-button>
        <el-button type="primary" @click="addBtn()"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <div class="shop_box">
    <avue-crud
      ref="crud"
      :data="data"
      :option="option"
      @selection-change="selectionChange"
      v-model:search="search"
      @search-change="searchChange"
      @search-reset="resetChange"
      @refresh-change="refreshChange"
      @row-del="rowDel"
      v-model:page="page"
      @on-load="onLoad"
    >
      <template #menu="{ row, index, size }">
        <el-button
          type="danger"
          :size="size"
          icon="el-icon-edit"
          @click="rowEdit(row, index)"
          >编辑</el-button
        >
      </template>
      <template #menu-left="{ size }">
        <el-button type="primary" :size="size" @click="add_list()"
          >+ 新增</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="toggleSelection()"
          >批量删除</el-button
        >
      </template>
    </avue-crud>
  </div>
</template>
  <script>
import axios from "axios";
export default {
  data() {
    return {
      num1: 1,
      num2: 1,
      num3: 1,
      num4: 1,
      radio: 1,
      radio1: 1,
      transName: "",
      jianshu: true,
      zhongliang: false,
      tijian: false,
      selectList: [],
      transfees: [],
      transportId: "",
      isbiaoge:false,
      page: {
        pageSize: 10,
      },
      num: 1,
      data: [],
      titles: "新增",
      flags: false,
      option: {
        addBtn: false,
        searchMenuSpan: 4,
        selection: true,
        align: "center",
        menuAlign: "center",
        border: true,
        headerAlign: "center",
        menuType: "button",
        columnBtn: false,
        editBtn: false,
        column: [
          {
            label: "运费名称",
            prop: "transName",
            search: true,
          },
          {
            label: "",
            prop: "",
            // search: false,
          },
        ],
      },
      add: [],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    //增加input元素
    appchied() {
      let table = document.querySelector(".biaoge");
      var textnode = document.createElement("tr");
      textnode.innerHTML = `<td style="width:200px;height:40px;background:fff;text-align: center;">请选择可配送区域 
      <span class="blue" style="cursor:pointer; color:#02a1e9;">删除</span></td>
        <td style="text-align: center;">
           <input type="text" class="inp" style="height:30px">
        </td>
        <td style="text-align: center;">
            <input type="text" class="inp" style="height:30px">
        </td>
        <td style="text-align: center;">
            <input type="text" class="inp" style="height:30px">
        </td>
        <td style="text-align: center;">
            <input type="text" class="inp" style="height:30px">
        </td>
      `;
      table.appendChild(textnode);
    },
    //显示隐藏
    flag_false() {
      this.flags = false;
    },
    //增加赋值为空
    add_list() {
      this.flags = true;
      this.titles = "新增";
      this.transName = "";
      this.num1 = "";
      this.num2 = "";
      this.num3 = "";
      this.num4 = "";
    },
    //编辑回显
    rowEdit(row, index) {
      console.log(row);
      this.titles = "编辑";
      this.flags = true;
      this.transName = row.transName;
      this.transportId = row.transportId;
    },
    //增加和编辑的确定按钮
    addBtn() {
      this.flags = false;
      if (this.titles == "新增") {
        axios({
          method: "POST",
          url: "http://111.67.198.176:8111/shop/transport",
          data: {
            chargeType: 0,
            hasFreeCondition: 0,
            isFreeFee: 0,
            t: 1669360222293,
            transName: this.transName,
            transfeeFrees: [{ freeCityList: [], freeType: 0 }],
            transfees: [
              {
                cityList: [],
                status: 1,
                firstPiece: this.num1,
                firstFee: this.num2,
                continuousPiece: this.num3,
                continuousFee: this.num4,
              },
            ],
          },
          headers: {
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          },
        });
        this.$message.success("操作成功");
      } else {
        axios({
          method: "PUT",
          url: "http://111.67.198.176:8111/shop/transport",
          data: {
            chargeType: 0,
            hasFreeCondition: 0,
            isFreeFee: 0,
            t: 1669362068596,
            transName: this.transName,
            transfeeFrees: [],
            transfees: [
              {
                cityList: [],
                continuousFee: this.num4,
                continuousPiece: this.num3,
                firstFee: this.num2,
                firstPiece: this.num1,
                status: 1,
                transfeeId: 332,
                transportId: this.transportId,
              },
            ],
            transportId: this.transportId,
          },
          headers: {
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          },
        });
        this.$message.success("操作成功");
      };
      setTimeout(()=>{
        this.getdata();
      },1000)
      
    },
    //监听
    selectionChange(list) {
      console.log(list);
      this.selectList = [];
      list.forEach((item) => {
        this.selectList.push(item.transportId);
      });
    },
    //批量删除
    toggleSelection() {
      axios({
        method: "DELETE",
        url: "http://111.67.198.176:8111/shop/transport",
        data: this.selectList,
        headers: {
          Authorization:
            "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
        },
      });
      this.$message.success("操作成功");
      this.getdata();

    },
    resetChange(item) {
      this.$message.success("清空回调");
    },
    //搜索
    searchChange(params, done) {
      this.$message.success("2s后关闭锁定");
      setTimeout(() => {
        done(params);
        axios({
          method: "get",
          url: `http://111.67.198.176:8111/shop/transport/page?t=1669105993011&current=1&size=10&transName=${params.transName}`,
          headers: {
            Authorization:
              "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
          },
        }).then((res) => {
          console.log(res, "搜索");
          this.data = res.data.records;
        });
        this.$message.success(JSON.stringify(params));
      }, 2000);
    },
    refreshChange() {
      this.$message.success("刷新回调");
    },
    //删除
    rowDel(form, index, done) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // done(form);
          axios({
            method: "DELETE",
            url: "http://111.67.198.176:8111/shop/transport",
            data: [form.transportId],
            headers: {
              Authorization:
                "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
            },
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          setTimeout(()=>{
            this.getdata()
          })
        })
        .catch(() => {});
    },
    //获取总数据
    getdata() {
      axios({
        method: "get",
        url: `http://111.67.198.176:8111/shop/transport/page?t=1669020543576&current=${this.num}&size=10`,
        headers: {
          Authorization:
            "rFOlVuCv7+9fhsOsaAUp6D+fmyxriZ/qcrRQwm9c+LZU8Wl3Ws55JGXbkiSodb3J",
        },
      }).then((res) => {
        this.data = res.data.records;
        localStorage.setItem("slength", res.data.total);
      });
    },
    //分页
    onLoad(page) {
      let Length = localStorage.getItem("slength");
      this.page.total = Number(Length);
      this.num = this.page.currentPage;
      this.getdata();
    },
    //弹框单选变量改变
    check1(e) {
      console.log(e);
      switch (e) {
        case (e = 1):
          this.tijian = true;
          this.zhongliang = false;
          this.jianshu = false;
          break;
        case (e = 2):
          this.jianshu = true;
          this.zhongliang = false;
          this.tijian = false;
          break;
        case (e = 3):
          this.zhongliang = true;
          this.jianshu = false;
          this.tijian = false;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped>
@import url("./index.css");

.biaoge tr .table_td {
  padding: 0px;
  line-height: 50px;
  width: 100px !important;
  height: 40px !important;
  background: red;
}
.inp {
  width: 80%;
}
.blue {
  display: inline-block;
  padding: 0 20px;
}
.shop_box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>